<!-- 接单 -->
<template>
	<view class="page_box">
		<view class="" v-if="!current">
			<view class="top_box">
				<image src="@/static/index_top.png" mode="aspectFill" class="top_indxImg"></image>
			</view>
			<image src="@/static/index.png" mode="aspectFill" class="index_jiaimg" v-if="certStatus!=2"></image>
			<image src="@/static/index_top2.png" mode="aspectFill" class="index_jiaimg" v-else></image>
			<view class="text_box" v-if="certStatus==0">
				<view class="text_title">温馨提示</view>
				<view>您尚未完成司机认证，请尽快认证</view>
			</view>
			<view class="text_box" v-else-if="certStatus==1">
				<view class="text_title">温馨提示</view>
				<view>您尚未完成司机认证，请尽快认证</view>
			</view>
			<view class="text_box" v-else>
				<view class="text_title">开启听单即刻货运</view>
				<view>未开启听单，暂时无法提供服务</view>
			</view>
			<view class="btn_box" @click="goCert" v-if="certStatus==0">
				去司机认证
			</view>
			<view class="btn_box" @click="goCert" v-else-if="certStatus==1">
				司机认证中
			</view>
			<view class="btn_box" @click="clicktd" v-else>开启听单</view>
		</view>
		<view v-else>
			<view class="" style="height: 80rpx;background-color: #fff;"></view>
			<view class="order_top">
				<image src="@/static/qiangdan.png" mode="aspectFill" class="order_topImg"></image>
				<view class="order_topSun" @click="clicktd()">
					<view>听单</view>
					<view class="order_tin">
						<view class="order_tinSun" style="margin-left: 4rpx;"></view>
						<view class="order_tinSun" style="margin-left: 6rpx;"></view>
					</view>
				</view>
			</view>
			<view class="order_indexImgBox">
				<image src="@/static/index_home.png" mode="aspectFill" class="order_indexImg"></image>
				<view class="order_inText">E路同程</view>
				<view class="order_inTextsun">一切好货就在E路同程</view>
			</view>
			<view class="order_tagBox">
				<view class="order_tagOne">
					<view class="order_tagflx" @click="TinShow=true">
						<view class="">听单偏好</view>
						<u-icon name="arrow-down-fill" color="#262626" size="5"></u-icon>
					</view>
					<view class="order_tagflx" @click="prefere">
						<view class="">路线偏好</view>
						<u-icon name="arrow-down-fill" color="#262626" size="5"></u-icon>
					</view>
				</view>
				<view class="order_tagflx" @click="HeatMap">
					<view style="font-size: 24rpx;">热力图</view>
					<image src="@/static/dinwei.png" mode="aspectFill" style="width: 24rpx;height: 25rpx;"></image>
				</view>
			</view>
			<scroll-view scroll-y="true" style="padding-bottom: 30rpx;">
				<view class="order_itembox" v-for="(item,i) in orderData" @click="torob(item,i)">
					<view class="order_itemboxTop">
						<view class="order_itemboxTopOne">
							<view class="order_money">¥{{item.totalAmount}} </view>
							<view class="order_liji">立即用车</view>
							<view class="order_Type" v-if="!JSON.parse(item.carTypeNeeds).name">微面</view>
							<view class="order_Type" v-else>{{JSON.parse(item.carTypeNeeds).name}}</view>
						</view>
						<view class="order_btn" >抢单</view>
					</view>
					<view class="addressBox">
						<view class="addressList">
							<view class="addressItem" v-for="(meth,k) in item.addresslist">
								<view class="stepIconBox" v-if="k==0">
									<view class="stepIcon stepIconActive"></view>
								</view>
								<view class="stepIconBox1" v-else-if="k==item.addresslist.length-1">
									<view class="stepIcon stepIconActive"></view>
								</view>
								<view class="stepIconBox1"
									v-else-if="k!=item.addresslist.length-1 & k!=0 & item.addressShow">
									<view class="stepIcon stepIconActive"></view>
								</view>
								<view class="address" v-if="k==0||k==item.addresslist.length-1">{{meth.address}}</view>
								<view class="address" v-if="k!=item.addresslist.length-1 & k!=0 &item.addressShow ">
									{{meth.address}}
								</view>
								<view class="zheDieBtn" @click="item.addressShow=!item.addressShow"
									v-if="item.addresslist.length>2">
									{{item.addresslist.length*1-2}}个折叠
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view v-if="seizeOrders">
			<u-modal :show="robShow" :showCancelButton="false" :showConfirmButton='false' width='690rpx'>
				<view class="" style="padding-left: 30rpx;padding-right: 30rpx;">
					<view class="order_modal">
						<view>
							<view class="order_modaltitle">{{seizeOrders.ownerName}}</view>
							<view class="order_modalflx">
								<view class="">立即用车</view>
								<view class="">货主派单</view>
							</view>
						</view>
						<view class="order_modyes"><span
								style="font-size: 36rpx;">¥</span><span>{{seizeOrders.totalAmount}}</span></view>
					</view>
					<view class="addressBox" style="margin-left: 0;">
						<view class="addressList">
							<view class="addressItem" v-for="(item,k) in seizeOrders.addresslist">
								<view class="stepIconBox" v-if="k==0">
									<view class="stepIcon stepIconActive"></view>
								</view>
								<view class="stepIconBox1" v-else>
									<view class="stepIcon stepIconActive"></view>
								</view>
								<view class="address address_flx" v-if="k==0">
									<view>{{item.address}}</view>
									<view class="addresSunflx">
										<image src="@/static/weizi.png" mode="aspectFill"
											style="width: 19rpx;height: 24rpx;margin-right: 10rpx;"></image>
										<view>距离我{{distanceKilometer}}</view>
									</view>
								</view>
								<view class="address" v-else>{{item.address}}</view>
							</view>
						</view>
					</view>
					<view class="model_btnflx">
						<view class="model_ju" @click="cancle">拒绝</view>
						<view class="model_jie" @click="getOrder(1)">立即抢单</view>
					</view>
				</view>
			</u-modal>
		</view>
	<!-- 	<view class="dispatch">
			<u-modal :show="cs==1 && certStatus==2" :showCancelButton="false" :showConfirmButton='false' width='335px'
				:closeOnClickOverlay='true'>
				<view class="slot-content">
					<view class="title">
						实名认证
					</view>
					<view class="dispatch_contain">
						<view class="one">
							<view class="one_right">
								姓名：{{resultDate.name}}
							</view>
						</view>
						<view class="" style="height: 20rpx;"></view>
						<view class="two">
							<view class="one_right">
								手机号：{{resultDate.phone}}
							</view>
						</view>
						<view class="" style="height: 20rpx;"></view>
						<view class="two">
							<view class="one_right">
								身份证号：{{resultDate.idcard}}
							</view>
						</view>
						<view class="" style="height: 20rpx;"></view>
						<view class="two">
							<view class="one_right">
								注意：确定信息后，您将收到一条短信，请点击短信链接进行实名认证，短信链接30分钟有效。
							</view>
						</view>
					</view>
					<view class="button_rob">
						<button @click="getOrder(3)" class="get">确定</button>
					</view>
				</view>
			</u-modal>
		</view>
		 -->
		<u-popup :show="TinShow" :round="20" @close='TinShow=false'>
			<view class="preference_title">
				<view>听单偏好</view>
			</view>
			<scroll-view scroll-y="true" style="height: 70vh;">
				<prefeVue />
			</scroll-view>
		</u-popup>

		<u-popup :show="preference" :round="20" @close='preference=false'>
			<view class="preference_title">
				<view>路线偏好</view>
			</view>
			<view class="" style="height: 30rpx;"></view>
			<view class="preference_add">
				<view class="preference_add_flx" @click="toRoute">
					<image src="@/static/order/jia.png" mode="aspectFill"></image>
					<view>添加路线</view>
				</view>
			</view>
			<view style="height: 20rpx;"></view>
			<view class="preference_item">
				<scroll-view scroll-y="true" style="height: 400rpx;padding-bottom: 30rpx;">
					<view class="preference_item_box" v-for="(item,i) in preference_mood">
						<view class="">
							<view class="preference_item_box_top">
								<view>
									<view class="preference_item_box_topFlx">
										<view class="preference_item_box_zhuang">装</view>
										<view class="preference_item_box_top_title">{{item.loadAdd}}
										</view>
									</view>
									<!-- <view class="preference_item_box_top_sumber">
							重庆市渝北区杨柳北路12号</view> -->
								</view>
							</view>
							<view class="preference_item_box_top" style="margin-top: 42rpx;">
								<view>
									<view class="preference_item_box_topFlx">
										<view class="preference_item_box_zhuang" style="background-color: #579AA3;">卸
										</view>
										<view class="preference_item_box_top_title">{{item.unloadAdd}}
										</view>
									</view>
									<!-- <view class="preference_item_box_top_sumber">
							重庆市渝北区杨柳北路12号</view> -->
								</view>
							</view>
						</view>
						<image src="@/static/order/sanchu.png" @click="preference_deilt(item,0)" mode="aspectFill"
							style="width: 40rpx;height: 40rpx;"></image>
					</view>
					
				</scroll-view>

			</view>
			<!-- <view class="preference_button">
				<u-button text="保存设置" color='#00A0E9' class="preference_button_ptao" type='primary'
					@click='preference=false'></u-button>
			</view> -->
		</u-popup>

		<view class="ordering" v-if="waybill_id!==0">
			<view class="btn" @click="orderDetail()">进行中订单</view>
		</view>
	</view>
</template>

<script>
	import order from '@/api/modules/order.js'
	import driverJs from '@/api/modules/driver.js'
	import prefeVue from '@/pages/getOrder/components/preferen.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			prefeVue
		},
		data() {
			return {
				preference_mood: [],
				TinShow: false,
				preference: false,
				orderShow: false,
				resultDate: {},
				cs: 0,
				stateTitle: "去认证",
				src: '',
				robShow: false,
				tingShow: false,
				current: false,
				weekDay: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
				timedate: "",
				timedateshow: false,
				show: false,
				openShow: false,
				fleetName: '重庆凯程车队',
				seizeOrders: {},
				tingseizeOrders: {},
				userid: "",
				orderData: [],
				dispatch: [], //派单
				dispatchIndex: null,
				current1: true,
				certStatus: 0,
				isShow: false,
				isBeginTd: false,
				waybill_id: 0,
				wstate: 0,
				waybillId: 0,
				addr: '',
				distanceKilometer: 0,
				title: '',
				addState: 0,
			}
		},
		watch:{
			current(e){
				uni.setStorageSync('current',e)
			}
		},
		computed: {
			...mapState({
				aaa: state => state.users.aaa,
			})
		},
		onLoad() {
			// let that = this;
			// uni.$on("getPositonsOrder", (res) => {
			// 	var date = res.data.replaceAll(" ", "");
			// 	if (date) {
			// 		var s = date.split(",")
			// 		var d = {}
			// 		for (var i = 0; i < s.length; i++) {
			// 			var key = s[i].split("=")[0];
			// 			var value = s[i].split("=")[1]
			// 			if (i == 0) {
			// 				key = key.substring(1, key.length)
			// 			}
			// 			if (i == s.length - 1) {
			// 				value = value.substring(0, value.length - 1)
			// 			}
			// 			d[key] = value
			// 		}
			// 		if (d.type == 'cargoowner') {
			// 			this.waybillId = d.wayBillId;
			// 			this.changeOrder1()
			// 		} else if (d.type == 'getDriverAddr') {
			// 			that.socketIo.send({
			// 				lat: "29.54584",
			// 				lng: "106.51235",
			// 				userId: d.userId
			// 			});
			// 		}
			// 	}
			// })
			// console.log(this.certStatus,11111111111)
		},
		onHide() {
			let that = this
			// this.socketIo.Close()
			if (uni.getStorageSync('userid')) {
				that.$http.order.closeWebSocketServer({
					session: uni.getStorageSync("userid")
				}).then(res => {})
			}
		},
		onShow() {
			if(uni.getStorageSync('current')!=''&&uni.getStorageSync('current')!=undefined){
				this.current = uni.getStorageSync('current')
				this.changeOrder();
			}
			let that = this
			uni.getLocation({
				type: 'wgs84', // 标准
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息，只有gcj02标准才可以用
				success: function(res) {
					that.addr = res.latitude + ',' + res.longitude
				},
				fail: function() {},
				complete: function() {}
			})
			this.current1 = true;
			this.robShow = false;
			this.tingShow = false;
			this.show = false;
			this.openShow = false;
			this.cs = 0;
			order.queryDriverStateDetail({}).then((res) => {
				var date = res.data.data;
				this.resultDate = res.data.data;
				this.certStatus =  date.cert_status
				if(this.certStatus==3){
					this.certStatus = 0
				}
				console.log(date.cert_status)
				if (date != null) {
					if (this.certStatus == 2) {
						this.current1 = false;
						if (date.member == 0) {
							this.cs = parseInt(this.cs) + 1;
						} else if (date.member == 1) {
							this.cs = 2;
						} else {
							this.cs = 3;
						}
					}
					//console.log(date)
					this.waybill_id = date.waybill_id;
					this.wstate = date.state;
					this.title = date.title
					this.addState = date.addState
					// if(this.wstate!=4){
					// 	if(date.title.indexOf("前往")>-1){
					// 		this.wstate = -1;
					// 	}
					// }
				} else {
					this.current1 = true;
				}
			})
		},
		created() {
			this.getLocation()
			this.Realtime()
			let a = {
				la:1,
				sa:2
			}
			let b = JSON.stringify(a)
			 b = JSON.stringify(b)
			 b = JSON.stringify(b)
			 b = JSON.stringify(b)
			 b = JSON.stringify(b)
			console.log(JSON.stringify(b))
			// this.changeOrder()
		},
		methods: {
			//常去地点设置
			toRoute() {
				uni.navigateTo({
					url: '/subPackages/map/AddRoute/AddRoute'
				})
			},
			async prefere() {
				let res = await this.$http.order.driver_check()
				if (res.data.code == 200) {
					this.preference_mood = res.data.data.preferencesRoute
					this.preference = true
				}
			},
			Realtime() {
				let that = this
				setInterval(() => {
					that.getLocation()
				}, 180000)
			},
			getLocation() {
				let that = this
				uni.getLocation({
					type: 'wgs84', // 标准
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息，只有gcj02标准才可以用
					success: function(res) {
						that.$http.driver.timingRenewDriverPosition({
							lat: res.latitude,
							lng: res.longitude
						})
					},
					fail: function() {},
					complete: function() {}
				})
			},
			changeOrder1() {
				this.$http.order.driver_waybill_detail(this.waybillId).then((res) => {
					this.tingShow = true;
					this.tingseizeOrders = res.data.data;
					this.countDistance(res.data.data);
				})
			},
			clicktd() {
				this.current = !this.current
				uni.setStorageSync('current',this.current)
				if (this.current) {
					this.changeOrder();
				} else {
					let that = this
					// this.socketIo.Close()
					if (uni.getStorageSync('userid')) {
						that.$http.order.closeWebSocketServer({
							session: uni.getStorageSync("userid")
						}).then(res => {})
					}
				}

			},

			//热力图
			HeatMap() {
				uni.navigateTo({
					url: '/subPackages/map/OrderHeatMap/OrderHeatMap'
				})
			},
			//立即接单
			getOrder(ind) {
				
				if (this.certStatus == 2) {
					if (ind == 0) {
						this.$http.order.modifyWayBillInfoByOrderId({
							waybillId: this.dispatch[this.dispatchIndex].waybillId,
							state: 1
						}).then((res) => {
							if (res.data.code == 200) {
								this.openShow = false
								this.show = false
								this.current = !this.current
								this.changeOrder();
							}
						})
					} else if (ind == 1) {
						this.$http.order.modifyWayBillInfoByOrderId({
							waybillId: this.seizeOrders.waybillId,
							state: 1
						}).then((res) => {
							if (res.data.code == 200) {
								uni.navigateTo({
									url: '/subPackages/order/orderDetail/orderDetail?id=' + this
										.seizeOrders.waybillId
								})
							}
						})
					} else if (ind == 3) {
						var d = {
							boos: this.resultDate.name,
							bossIccard: this.resultDate.idcard,
							bossPhone: this.resultDate.phone,
							memberType: 0,
						}
						driverJs.memberOpenAnAccount(d).then((res) => {
							if (res.data.code == 200) {
								var str = res.data.msg
								this.cs = 2
							}

						})
					} else {
						this.$http.order.driverVirtuallyOrder({
							waybillId: this.waybillId,
							state: 1,
							addr: this.addr
						}).then((res) => {
							if (res.data.code == 200) {
								uni.navigateTo({
									url: '/subPackages/order/orderDetail/orderDetail?id=' + this
										.tingseizeOrders.waybillId
								})
							}
						})
					}
				} else {
					this.goCert();
				}
			},
			//枪单
			torob(e) {
				this.countDistance(e);
				this.seizeOrders = e;
				this.robShow = true
			},
			//仍要拒绝
			refuse() {
				this.$http.order.modifyOrderInfoByOrderId({
					orderId: this.dispatch[this.dispatchIndex].orderId,
					state: 2
				}).then((res) => {
					if (res.data.code == 200) {
						this.openShow = false
						this.show = false
						this.current = !this.current
						this.changeOrder();
					}
				})

			},
			//取消警告第二次
			cancel_two() {
				this.openShow = false
				this.show = true
			},
			//取消警告
			cancle() {
				this.robShow = false
			},
			tingdan() {
				// this.socketIo.constructor(uni.getStorageSync("userid"))
				// this.socketIo.connectSocketInit()
			},
			//切换听单状态
			changeOrder() {
				
				 //console.log(this.certStatus,33333)
				return
				if (this.certStatus == 2) {
					this.tingdan();
					var d = {};
					this.orderData = [];
					this.dispatch = [];
					if (this.current) {
						var date = new Date();
						var day = date.getDate();
						this.$http.order.query_order_list(d).then((res) => {
							this.orderData = res.data.data.list
							this.userid = res.data.data.userid
							this.driverid = res.data.data.driverid
							this.orderData.forEach((item, index) => {
								var date1 = new Date(item.createTime)
								item.addressShow = false
								var day1 = date1.getDate();
								var dnum = day - day1;
								if (parseInt(dnum) > 2 || parseInt(dnum) < -2) {
									this.timedate = item.createTime
									this.timedateshow = false;
								} else {
									this.timedateshow = true;
									switch (dnum) {
										case 2:
											this.timedate = "前天"
											break;
										case 1:
											this.timedate = "昨天"
											break;
										case 0:
											this.timedate = "今天"
											break;
										case -1:
											this.timedate = "明天"
											break;
										case -2:
											this.timedate = "后天"
											break;
									}
								}
								if (item.appointDrivers) {
									if (item.appointDrivers.indexOf(this.driverid) > -1) {
										this.dispatch.push(item)
									}
								}
							})
							this.orderData = JSON.parse(JSON.stringify(this.orderData))
							//console.log(this.orderData)
						})
					}
				} else {
					this.goCert();
				}
			},
			// 听单偏好设置跳转
			setPreferences() {
				uni.navigateTo({
					url: '/subPackages/order/preferences/preferences'
				})
			},
			// 去认证
			goCert() {
				if (this.certStatus != 2) {
					uni.navigateTo({
						url: '/subPackages/driver/franchise/franchise'
					})
				}

			},
			// 订单详情
			orderDetail() {
				if (this.title == '订单已完成' || this.addState == 4) {
					uni.navigateTo({
						url: '/subPackages/order/querenTwo/querenTwo?id=' + this.waybill_id
					})
				} else if (this.title == "前往卸货地" || this.title == "前往装货地") {
					uni.navigateTo({
						url: '/subPackages/map/OrderNavigation/OrderNavigation?id=' + this.waybill_id
					})
				} else {
					uni.navigateTo({
						url: '/subPackages/order/orderDetail/orderDetail?id=' + this.waybill_id
					})
				}
			},
			//计算司机离当前订单距离
			countDistance(item) {
				let that = this
				uni.getLocation({
					type: 'wgs84', // 标准
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息，只有gcj02标准才可以用
					success: function(res) {
						//起点
						that.addr = res.latitude + ',' + res.longitude
						//终点
						if (item.addresslist != undefined && item.addresslist != null && item.addresslist
							.length > 0) {
							var startAddr = item.addresslist[0].lat.substring(0, 9) + ',' + item.addresslist[0]
								.lng.substring(0, 10);
							var d = [{
								startAddr: startAddr,
								lastAddr: that.addr
							}]
							driverJs.countDistanceArray(d).then((res) => {
								if (res.data.code == 200) {
									var result = res.data.data;
									that.distanceKilometer = result[0].distance;
								}
							})
						}

					},
					fail: function() {},
					complete: function() {}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ordering {
		width: 100%;
		position: fixed;
		margin: 30upx auto;
		z-index: 6666;
		top: 40%;

		.btn {
			width: 220upx;
			height: 70upx;
			border-radius: 35upx 0upx 0upx 35upx;
			background-color: #00A0E9;
			color: #FFFFFF;
			text-align: center;
			line-height: 70upx;
			position: fixed;
			right: 0;
		}
	}

	.loadAdd_title {
		width: 400rpx;
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.preference_item_box_zhuang {
		background-color: #019FE8;
		width: 56rpx;
		height: 56rpx;
		border-radius: 100%;
		color: #fff;
		text-align: center;
		line-height: 56rpx;
		font-size: 24rpx;
	}

	.oftenadd {
		width: 710rpx;
		margin-top: 40rpx;
		border-radius: 10rpx;
		background-color: #fff;
		height: 100rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.preference_button_ptao {
		width: 710rpx;
		height: 110rpx;
		margin-top: 35rpx;
	}

	.preference_button {
		height: 233rpx;
		width: 750rpx;
		background-color: #fff;
	}

	.preference_add_flx image {
		width: 22rpx;
		height: 22rpx;
		margin-right: 15rpx;
	}

	.preference_add_flx {
		display: flex;
		align-items: center;
		color: #999999;
		font-size: 30rpx;
	}

	.preference_add {
		width: 710rpx;
		border-radius: 10rpx;
		background-color: #fff;
		height: 100rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.preference_item_box_top_number {
		font-size: 28rpx;
		color: #202020;
		font-weight: 600;
	}

	.preference_item_box_top_sumber {
		margin-left: 54rpx;
		font-size: 26rpx;
		color: #777777;
		margin-top: 20rpx;
	}

	.preference_item_box_top_title {
		font-size: 32rpx;
		margin-left: 20rpx;
	}

	.preference_item_box_topFlx {
		display: flex;
		align-items: center;
	}

	.preference_item_box_topFlx image {
		width: 34rpx;
		height: 34rpx;
	}

	.preference_item_box_top1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		margin-top: 30rpx;
		height: 80rpx;
		width: 710rpx;
		margin-left: 20rpx;
		border-radius: 10rpx;
		padding: 20rpx 0;
	}

	.preference_item_box_top1 image {
		margin-left: 20rpx;
	}

	.preference_item_box_top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		width: 100%;
	}

	.preference_item_box {
		background-color: #fff;
		border-radius: 10rpx;
		width: 670rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		margin: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}

	.preference_item {
		background-color: #F6F6F6;
	}

	.preference_title {
		height: 93rpx;
		text-align: center;
		padding-top: 29rpx;
		font-size: 36rpx;
		font-weight: 600;
	}

	.addresSunflx {
		display: flex;
		font-size: 24rpx;
		color: #AFAFAF;
		align-items: center;
	}

	.address_flx {
		display: flex;
		justify-content: space-between;
	}

	.model_jie {
		width: 396rpx;
		height: 90rpx;
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		border: 1rpx solid #0094E9;
		background-color: #0094E9;
		border-radius: 8rpx;
	}

	.model_ju {
		width: 200rpx;
		height: 90rpx;
		color: #707070;
		text-align: center;
		line-height: 90rpx;
		border: 1rpx solid #9C9C9C;
		border-radius: 8rpx;
	}

	.model_btnflx {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.order_modyes {
		font-size: 56rpx;
		font-weight: 600;
	}

	.order_modaltitle {
		font-size: 36rpx;
		font-weight: 600;

	}

	.order_modal {
		width: 100%;
		justify-content: space-between;
		display: flex;
	}

	.order_modalflx {
		display: flex;
		margin-top: 15rpx;
	}

	.order_modalflx view {
		width: 128rpx;
		height: 40rpx;
		background-color: #E5F5FE;
		color: #0094E9;
		font-size: 24rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 10rpx;
	}

	//地址步骤列表
	.addressBox {
		width: 618rpx;
		margin-left: 36rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		background-color: #F9F9F8;
		box-sizing: border-box;
		margin-top: 28rpx;
		border-radius: 8rpx;
	}

	.addressList {
		width: 618rpx;
		padding: 0rpx 43rpx 0rpx 28rpx;
		box-sizing: border-box;
		background-color: #F9F9F8;
		overflow: hidden;
		position: relative;
		border-radius: 8rpx;




		.zheDieBtn {
			position: absolute;
			top: 50%;
			right: 43rpx;
			transform: translateY(-50%);
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #9F9F9F;
		}

		.addressItem {
			display: flex;
			align-items: center;
			margin-bottom: 44rpx;

			&:last-child {
				margin-bottom: 0rpx;
			}

			// 虚线
			&::after {
				content: ' ';
				width: 3rpx;
				position: absolute;
				border-right: 3rpx dashed #AFAFAF;
				height: 100%;
				left: 36rpx;
				top: 42rpx;
			}

			.address {
				width: 552rpx;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi;
				font-weight: 400;
				color: #262626;
				margin-left: 21rpx;
			}

			.stepIconBox {
				height: 38rpx;
				display: flex;
				align-items: center;
				background-color: #F9F9F8;
				position: relative;
				z-index: 100;

				.stepIcon {
					width: 17rpx;
					height: 17rpx;
					border: 2px solid #979797;
					border-radius: 50%;
					background-color: #F9F9F8;

				}
			}

			.stepIconBox1 {
				height: 38rpx;
				display: flex;
				align-items: center;
				background-color: #F9F9F8;
				position: relative;
				z-index: 100;

				.stepIcon {
					width: 17rpx;
					height: 17rpx;
					border: 2px solid #0094E9;
					border-radius: 50%;
					background-color: #0094E9;
				}
			}

			.stepIconActive {
				background: #0094E9;
				border-color: #0094E9;
			}
		}

	}

	.order_btn {
		width: 120rpx;
		height: 60rpx;
		font-size: 28rpx;
		background-color: #11A5FA;
		color: #fff;
		border-radius: 30rpx;
		text-align: center;
		line-height: 60rpx;
	}

	.order_Type {
		width: 55rpx;
		height: 32rpx;
		line-height: 32rpx;
		text-align: center;
		border: 1rpx solid #262626;
		margin-left: 15rpx;
	}

	.order_liji {
		height: 32rpx;
		text-align: center;
		line-height: 32rpx;
		border: 1rpx solid #11A5FA;
		color: #11A5FA;
		padding: 0 8rpx;
		margin-left: 17rpx;
	}

	.order_money {
		font-size: 54rpx;
		font-weight: 600;
	}

	.order_itemboxTopOne {
		display: flex;
		font-size: 24rpx;
		align-items: center;
	}

	.order_itemboxTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.order_itembox {
		width: 690rpx;
		background-color: #fff;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-left: 30rpx;
		margin-top: 30rpx;
		border-radius: 20rpx;
	}

	.order_tagBox {
		width: 690rpx;
		margin-left: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 38rpx;
	}

	.order_tagflx view {
		margin-right: 8rpx;
	}

	.order_tagflx {
		display: flex;
		align-items: center;
	}

	.order_tagOne {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		width: 300rpx;
		justify-content: space-between;
	}

	.order_inTextsun {
		font-size: 24rpx;
		position: absolute;
		left: 50rpx;
		top: 134rpx;
	}

	.order_inText {
		font-size: 52rpx;
		font-weight: 600;
		position: absolute;
		left: 50rpx;
		top: 66rpx;
	}

	.order_indexImgBox {
		width: 690rpx;
		height: 220rpx;
		position: relative;
		margin: 0 auto;
	}

	.order_indexImg {
		width: 690rpx;
		height: 220rpx;
		position: absolute;
	}

	.order_tinSun {
		width: 3rpx;
		height: 14rpx;
		background-color: #11A5FA;
	}

	.order_tin {
		width: 40rpx;
		height: 40rpx;
		background-color: #1A1A1B;
		border-radius: 100%;
		margin-left: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.order_top {
		width: 100%;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 40rpx;
		padding-top: 40rpx;
	}

	.order_topImg {
		width: 156rpx;
		height: 38rpx;
		margin-left: 32rpx;
	}

	.order_topSun {
		width: 136rpx;
		height: 56rpx;
		background-color: #F2F2F1;
		border-radius: 28rpx;
		margin-right: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
	}

	.btn_box {
		color: #fff;
		background-color: #37B6FD;
		width: 600rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 48rpx;
		margin: 0 auto;
		margin-top: 15%;
	}

	.text_title {
		font-size: 40rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		color: #262626;
	}

	.text_box {
		width: 390rpx;
		color: #A9A9A9;
		font-size: 26rpx;
		text-align: center;
		margin: 0 auto;
	}

	.index_jiaimg {
		width: 750rpx;
		height: 339rpx;
	}

	.top_indxImg {
		width: 569rpx;
		height: 124rpx;
		margin-left: 63rpx;
		margin-top: 300rpx;
	}

	.top_box {
		width: 750rpx;
		height: 505rpx;
		background-image: linear-gradient(180deg, #37B6FD 40%, #F2F2F1 90%);
	}

	.page_box {
		background-color: #F2F2F1;
		width: 100%;
	}

	.dispatch {
		.title {
			width: 335px;
			display: flex;
			height: 100upx;
			align-items: center;
			color: #666666;
			font-size: 26upx;
			font-family: PingFang SC;
			position: relative;
			top: -50upx;
			background-color: #F0F3F5;
			box-sizing: border-box;
			padding-left: 30upx;

			text {
				color: #019FE8;
				font-size: 26upx;
				font-family: PingFang SC;
				font-weight: 700;
			}

			.tag {
				width: 100upx;
				height: 50upx;
				border-radius: 25upx;
				text-align: center;
				line-height: 50upx;
				border: 1upx solid #019FE8;
				color: #019FE8;
				font-size: 22upx;
				font-family: PingFang SC;
				position: absolute;
				right: 30upx;
			}
		}

		.button {
			display: flex;
			align-items: center;

			.cancle {
				width: 200upx;
				height: 90upx;
				background-color: #579AA3;
				color: #FFFFFF;
				font-family: PingFang SC;
			}

			.get {
				width: 370upx;
				height: 90upx;
				background-color: #00A0E9;
				color: #FFFFFF;
				font-family: PingFang SC;
			}
		}

		.dispatch_contain {
			width: 85%;
			margin-left: 60upx;

			.two {
				margin-top: 20upx;
			}

			.one,
			.two {

				display: flex;
				// justify-content: space-around;
				align-items: center;


				.one_right {
					// height: 70upx;
					// line-height: 70upx;
					font-size: 30upx;
					font-weight: blod;
					font-family: PingFang SC;
					color: #202020;
				}

				image {
					width: 34upx;
					height: 34upx;
					margin-right: 20upx;

				}


			}

			.three {
				display: flex;
				align-items: center;
				margin: 20upx;
				height: 40upx;
				position: relative;

				.left {
					font-size: 24upx;
					font-family: PingFang SC;
					color: #666666;
				}

				.right {
					font-size: 40upx;
					font-family: PingFang SC;
					color: #00A0E9;
					font-weight: blod;
					position: absolute;
					right: 70upx;
				}
			}
		}



	}

	.button_rob .get {
		width: 590rpx;
		height: 90upx;
		background-color: #00A0E9;
		color: #FFFFFF;
		font-family: PingFang SC;
		margin-top: 40rpx;
	}
</style>